<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
  <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
  <script src="https://cdn.staticfile.org/Mock.js/1.0.1-beta3/mock-min.js"></script>
  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    <h2>普通用户登录</h2>
    <avue-login :option="option" @submit="submit">
    </avue-login>
    <h2>图片验证码登录</h2>
    <avue-login :option="option1" @refresh="refresh" :codesrc="codesrc" @submit="submit">
    </avue-login>
    <h2>手机号登录</h2>
    <avue-login :option="option2" @submit="submit" @send="send">
    </avue-login>
    <h2>调整边距</h2>
    <avue-login :option="option3" @submit="submit" @send="send">
    </avue-login>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        codesrc: '',
        option: {
          width: 400,
          time: 60,
          codeType: 'phone', //phone为手机验证码/img为图片验证码
          column: {
            username: {
              // hide: true,
              label: '用户名',
              // prop: 'user',
              // placeholder:'',
              autocomplete: 'off',
              rules: { required: true, message: '请输入用户名', trigger: 'blur' }
            },
            password: {
              label: '密码',
              // prop: 'pass',
              // placeholder:'',
              autocomplete: 'off',
              rules: { required: true, message: '请输入密码', trigger: 'blur' }
            },
            code: {
              hide: true
            }
          }
        },
        option1: {
          width: 400,
          codeType: 'img',
          column: {
            username: {
              label: '用户名',
              placeholder: '手机号/邮箱/用户名',
              autocomplete: 'off',
              rules: { required: true, message: '请输入用户名', trigger: 'blur' }
            },
            password: {
              label: '密码',
              autocomplete: 'off',
              rules: { required: true, message: '请输入密码', trigger: 'blur' }
            },
            code: {
              label: '验证码',
              tip: '点击图片可以刷新验证码',
              autocomplete: 'off',
              rules: { required: true, message: '请输验证码', trigger: 'blur' }
            }
          }
        },
        option2: {
          width: 400,
          time: 60,
          codeType: 'phone',
          column: {
            username: {
              label: '手机号',
              prefixIcon: 'el-icon-mobile-phone',
              placeholder: '手机号/邮箱/用户名',
              autocomplete: 'off',
              rules: { required: true, message: '请输入手机号', trigger: 'blur' }
            },
            password: {
              hide: true,
            },
            code: {
              label: '验证码',
              autocomplete: 'off',
              rules: { required: true, message: '请输验证码', trigger: 'blur' }
            }
          }
        },
        option3: {
          width: 400,
          time: 60,
          labelWidth: 120,
          codeType: 'phone',
          column: {
            username: {
              label: '手机号',
              prefixIcon: 'el-icon-mobile-phone',
              placeholder: '手机号/邮箱/用户名',
              autocomplete: 'off',
              rules: { required: true, message: '请输入手机号', trigger: 'blur' }
            },
            password: {
              hide: true,
            },
            code: {
              label: '验证码',
              autocomplete: 'off',
              rules: { required: true, message: '请输验证码', trigger: 'blur' }
            }
          }
        }

      }
    },
    created() {
      this.refresh();
    },
    methods: {
      refresh() {
        this.$message.success('图片验证码刷新成功')
        this.codesrc = "https://pigx.pig4cloud.com/code?randomStr=" + new Date().getTime();
      },
      send(done) {
        this.$message.success('验证码发送成功')
        done();
      },
      submit(form) {
        console.log(form);
      }
    }
  })
</script>

</html>